import React, { useEffect, useState } from "react"
import styles from "./addDefence.less"
import {IRouteComponentProps} from 'umi'
import { Button,Form,Input,Select,Space,Radio,DatePicker,Cascader,Table} from "antd"
import {SaveOutlined} from "@ant-design/icons"
import useStore from "@/context/useStore"
import { observer } from "mobx-react-lite"
import { getClasssPlanTreelist, selectStationLabel,addDefencelist,selectClassPlanInit,getDefenceDetial } from "@/services/index"
import {ISkillLabel,proManagementList,addDefence,defenceResList,ClassPlanInit} from '@/utils/interface'
const { RangePicker } = DatePicker;


const columns = [
    {
      title: '姓名',
      dataIndex: 'username',
      align:'center',
      width:200
    },
    {
      title: '项目测试',
      dataIndex: 'studentUrl',
      align:'left'
    }
  ];



const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
  ];

const QuestionHandle:React.FC<IRouteComponentProps>=(props)=>{

    let { addDefence } = useStore()
    const [title, settitle] = useState<ISkillLabel[]> ([]);
    const [classsPlanTree, setClasssPlanTree] = useState<proManagementList[]>([]);
    const [defencelist, setdefence] = useState<defenceResList> ({} as defenceResList);
    const [flag, setflag] = useState (true);
    const [tabFlag, settabFlag] = useState (false);
    const [groupname, setgroupname] = useState (''); // 组
    const [members, setmembers] = useState (''); // 成员数   
    const [taskList, settaskList] = useState (''); //  任务   
    const [stuList, setstuList] = useState ([]); //  成员 

    let pueryparams = {
        classplan: [],          //[班级计划 id ,班级计划  第二层 id ]
        defenceAdress: '',  //答辩地址
        defenceAuthorName: '郭老师',  //用户名称
        defenceClassId: '',     //班级计划 id
        defenceCreateTime: '',  //开始时间
        defenceEndTime: '',     //结束时间
        defenceId: '',          // 空
        defenceMajorId:'',      //专业id
        defencePlanId: '',      //班级计划  第二层 id
        defenceScore: '',       //空
        degenceName:'',         //答辩名称
        majorList: '',          //空
        time:[]                 //[开始 结束]时间
    }
    useEffect(() => {
        
        let defenceId = props.location.query.defenceId
        getDefenceDetial(defenceId).then(res=>{
            if(res.data.className){
                setdefence(res.data)
                settabFlag(true)
            }
        })
        getClasssPlanTreelist().then(res=>{
            // console.log(res);
            setClasssPlanTree(res.data)
        })
        selectStationLabel().then(res=>{
            // console.log(res);
            settitle(res.data)
        })
    }, [])
    
    function finishi(value:any) {
        let {classplan,defenceAdress,defenceMajorId,degenceName} = value;
        // let newpueryparams = {...pueryparams,classplan,defenceAdress,defenceMajorId,degenceName,defenceClassId:classplan[0],defencePlanId:[1],}

        // console.log(value.time[0]._d);
        // console.log(new Date(value.time[0]._d));
        console.log(value);

        function add0(m:any){return m<10?'0'+m:m }

        function format(shijianchuo:any)
        {
        //shijianchuo是整数，否则要parseInt转换 
        var time = new Date(shijianchuo);
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
        }

        let defenceCreateTime = format(value.time[0]._d);
        let defenceEndTime = format(value.time[1]._d);
        // console.log(defenceCreateTime);
        // console.log(defenceEndTime);
        
        let newpueryparams = {...pueryparams,classplan,defenceAdress,defenceMajorId,degenceName,defenceClassId:classplan[0],defencePlanId:classplan[1],defenceCreateTime,defenceEndTime,time:[defenceCreateTime,defenceEndTime]}
        console.log(newpueryparams);
        addDefencelist(newpueryparams).then(res=>{
            if(res.code == 200){
                // console.log(res.data,'123123123112312313');
                
                setdefence(res.data)
            }
        })

        //发起下方的 请求 defenceClassId defencePlanId  //正常保存 
        let params:ClassPlanInit = {classid:value.defenceClassId,classPlanid:value.defencePlanId}
        selectClassPlanInit(params).then(res=>{
            console.log(res);
            if(res.data.list[0]){
                setgroupname(res.data.list[0].groupname)  //组
                setmembers(res.data.list[0].members) // 成员数
                settaskList(res.data.list[0].myProject[0].taskList.length)  //任务
                setstuList(res.data.list[0].stuList)
            }
            //res.data.list[0].groupname   组
            //res.data.list[0].members     成员数
            //res.data.list[0].myProject[0].taskList     任务
            //res.data.list[0].stuList      成员
            //res.data.begintime      开始时间
            //res.data.endtime        结束时间

            //res.data.list[1].groupname   组2
            //res.data.list[1].members     组2 成员数
            //res.data.list[1].myProject[0].proname     姓名 后的 "5.10项目测试"
            //res.data.list[1].stuList      组2 成员



            //
            settabFlag(true)
        })
    }

    useEffect(() => {
        setflag(!flag)
    }, [defencelist])

    /**
     *  beginTime: null
        begintime: "2021-06-10 00:00:00"
        className: "网站2021A班"
        classid: "9"
        countCompleted: null
        countStus: 10
        countUncompleted: 0
        description: ""
        endTime: null
        endtime: "2021-07-15 23:59:59"
        id: "fc8098a303b1429ebc017ad1582545bf"
        list: [{id: "b4442e36f9504ab4aa1066899bff2a10", classid: null, groupname: "组1", members: 2, finished: 0,…}]
        planname: "1312"
        progress: "0"
        states: "0"
        stuRank: null
     */
    return <div className={styles.defence}>
        <div className={styles.box}>
            <section className={styles.top}>
                <div className={styles.left}>
                    <span className={styles.ico}></span>
                    <span className={styles.title}>发起答辩</span>
                </div>
                <div className={styles.right}>
                    <Button className={styles.butlast} onClick={()=>{history.go(-1)}}>返回</Button>
                    <Button className={styles.butpop} type="primary">提交</Button>
                </div>
            </section>
            <section className={styles.but}>
                <Form  onFinish={finishi}>
                    <Button  htmlType="submit" className={styles.button}>
                        <SaveOutlined />保存
                    </Button>
                    

                    {
                        flag?
                        <div className={styles.newbutbox}>
                            <div className={styles.Inpone}>
                                <div>
                                    答辩名称:{defencelist.degenceName}
                                </div>
                                <div className={styles.rightmajorName}>
                                    专业:{defencelist.majorName}
                                </div>
                            </div>
                            <div className={styles.Inptwo}>
                                <div>
                                    答辩时间:{`${defencelist.defenceCreateTime}至${defencelist.defenceEndTime}`}
                                </div>
                            </div>
                            <div className={styles.Inpone}>
                                <div >
                                    班级/计划:{`${defencelist.className}/${defencelist.planName}`}
                                </div>
                                <div className={styles.defenceAdress}>
                                    答辩地址:{defencelist.defenceAdress}
                                </div>
                            </div>
                            <div className={styles.Inpthree}>
                                <p><b>发起人</b>郭老师</p>
                            </div>
                        </div>:


                        <div className={styles.butbox}>
                        <div className={styles.Inpone}>
                            <Form.Item label="答辩名称" name="degenceName" rules={[{required: true, message:"请输入答辩名称"}]}>
                                <Input  className={styles.option} />
                            </Form.Item>
                            <Form.Item label="专业" name="defenceMajorId" rules={[{required: true, message:"请选择专业"}]}>
                                <Select className={styles.option}>
                                    {/* <Select.Option value='title' >123</Select.Option> */}
                                    {
                                        title.map(item=>{
                                            return <Select.Option value={item.id} key={item.id} >{item.name}</Select.Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        </div>
                        <div className={styles.Inptwo}>
                            <Form.Item label="答辩时间" name="time" rules={[{required: true, message:"请选择答辩时间"}]}>
                                {/* <Space> */}
                                    <RangePicker />
                                {/* </Space> */}
                            </Form.Item>
                        </div>
                        <div className={styles.Inpone}>
                            <Form.Item label="班级/计划" name="classplan" rules={[{required: true, message:"请选择班级/计划"}]}>
                                    <Cascader
                                        // defaultValue={['zhejiang', 'hangzhou', 'xihu']}
                                        options={classsPlanTree}
                                        // onChange={onChange}
                                    />
                            </Form.Item>
                            <Form.Item label="答辩地址" name="defenceAdress" rules={[{required: true, message:"请输入答辩地址"}]}>
                                <Input  className={styles.option} />
                            </Form.Item>
                        </div>
                        <div className={styles.Inpthree}>
                            <p><b>发起人</b>郭老师</p>
                        </div>
                    </div>
                    }
                </Form>
            </section>
            <section className={styles.twobuttom}>
                {
                    tabFlag && <div className={styles.towtop}>
                        <p className={styles.pin}>{groupname}</p>
                        <div className={styles.context}>
                            <div className={styles.contextTop}>
                                <span className={styles.one}>成员 {members} 名</span>
                                <span className={styles.two}>任务 {taskList} 个</span>
                                <span>时长 52 天</span>
                            </div>
                            <div className={styles.contextbtm}>
                                <span>清空</span>
                                <span><input type="checkbox" />已完成未评分</span>
                                <span><input type="checkbox" />已答辩</span>
                            </div>
                        </div>
                    </div>
                }
                {
                    tabFlag && <div className={styles.tablebut}>
                                    <Table columns={columns as any} dataSource={stuList} pagination={false} />
                                </div>
                }
                
            </section>
        </div>
    </div>   
}

export default observer(QuestionHandle)